<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<h:head>
	<h:outputStylesheet library="css" name="style.css" />
	<title>Twitter</title>
</h:head>
<h:body>

	<f:view>

		<ui:include src="barraSup.xhtml" />

		<div id="wrap">

			<ui:include src="include.xhtml" />

			<div id="content">
				<h:messages></h:messages>
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="Usuarios" />
					</f:facet>
					<div class="centrarContentDos">
					<rich:dataTable id="tablaListaUsuarios" value="#{twitter.usuarios}"
						reRender="masterDS" height="520px" width="100px" var="us">

						<rich:column rowspan="1" styleClass="rf-dt-c">
							<h:graphicImage value="#{us.urlImagen}" width="50" height="50" />
						</rich:column>
						<rich:column>
							<h:outputText value="#{us.nombre}" styleClass="h5" />
							<h:outputText value="@#{us.nick}" styleClass="h6" />
							<br></br>
							<h:form>
								<h:commandButton image="../images/followMe.png"
									action="#{usuario.agregarFollow}">
									<f:param name="seguirA" value="#{us.id}" />
								</h:commandButton>
								<rich:tooltip>
									<span style="white-space: nowrap"> <h:outputText
											value="Follow Me!!!!"></h:outputText>
									</span>
								</rich:tooltip>
							</h:form>
						</rich:column>

					</rich:dataTable>
					</div>
				</rich:panel>
			</div>
			<!--end content-->

		</div>
		<!--end wrap-->
	</f:view>
</h:body>
</html>